<template>
    <div id="app">
        <!-- 调用这个插件，调用插件的名称即是导入时的名称。 还可以写成  <Banner/>  -->
        <div style="width: 1080px;margin: 0px auto;">
            <Banner :banners="banners"></Banner>
        </div>
    </div>
</template>

<script>
    //导入一个插件，插件使用默认导出，因此这里采用默认导入，还有具名导出。
    import Banner from './components/Banner'


    export default {
        components: {
            //引入一个插件
            Banner,
        },
        data() {
            return {
                /*
                todo 1
                    此处书写的图片的路径的数组，想要当作参数(banners)传递给组件Banner，结果由于此处的路径传递过去，组件本身会把传递的参数当作变量直接使用，因此出现图片的地址为 <img src="../assets/banner/banner1.jpeg" alt="">
                    导致图片无法正常的显示出来。原因在于这里的路径在传递的过程中并没有真实的转成真正的路径，而仅仅是当作参数传递了过去。
                    解决方案有两个
                    1.在webpack中一切资源皆模块，因此可以把图片资源当作模块导入进来
                    import banner1 from "./assets/banner/banner1.jpeg"
                    然后再将导入进来的资源赋值给数据中
                    {url:banner1,href:"www.baidu.com"},
                    2.使用require("../assets/banner/banner1.jpeg") 将图片资源导入进来

                 */

                banners: [
                    {url: require("./assets/banner/banner1.jpeg"), href: "https://www.baidu.com"},
                    {url: require("./assets/banner/banner2.jpeg"), href: "www.baidu.com"},
                    {url: require("./assets/banner/banner2.jpeg"), href: "www.baidu.com"},
                    {url: require("./assets/banner/banner3.jpeg"), href: "www.baidu.com"}
                ]
            }
        },
    }
</script>

<style>
</style>
